<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端导航，编程导航，导航</title>
    <meta name="keywords" content="前端导航，编程导航，导航" />
    <meta name="description" content="前端导航，编程导航，导航" />
    <link rel="shortcut icon" href="/my-nav/favicon.ico" type="image/x-icon">
    <style>
        html {
            box-sizing: border-box;
        }

        * {
            box-sizing: inherit;
        }

        body {
            margin: 0;
            color: #333;
            font-size: 16px;
            font-family: SimHei, system-ui;
        }

        header {
            display: flex;
            align-items: center;
            padding: 20px;
            box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            background-color: #fff;
            z-index: 10;

            & h1 {
                display: flex;
                align-items: center;
                margin: 0;
                flex-shrink: 0;
                color: blueviolet;
            }
        }

        #navBox {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;

            & li {
                padding: 10px;
                margin-left: 20px;
                cursor: pointer;

                &.nav-active,
                &:hover {
                    color: #fff;
                    background-color: blueviolet;
                }
            }
        }

        #listBox {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            margin-left: -20px;
            padding: 20px;

            & li {
                display: flex;
                align-items: center;
                width: calc(25% - 20px);
                margin-left: 20px;
                padding: 20px;
                border: 1px solid #eee;
                margin-bottom: 20px;
                border-radius: 6px;
                box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);

                & a {
                    text-decoration: none;
                    color: inherit;
                    font-size: 18px;
                }

                & .img {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 40px;
                    height: 40px;
                    overflow: hidden;
                    margin-right: 10px;
                    border: 1px solid #eee;
                    border-radius: 6px;

                    & img {
                        width: 100%;
                        height: auto;
                    }
                }

                &:hover {
                    color: blueviolet;
                }
            }
        }
    </style>
</head>

<body>
    <header>
        <h1>前端导航</h1>
        <nav>
            <ul id="navBox">
                <!-- <li>Vue</li> -->
            </ul>
        </nav>
    </header>
    <section>
        <ul id="listBox">
            <li>
                <img src="" alt="">
                <a href="http://" target="_blank">
                </a>
            </li>
        </ul>
    </section>
    <script type="module">
        //  https://hepingmogul.gitee.io/my-nav/static/data/docs.js
        const baseURL = /gitee/.test(location.host) ? '/my-nav' : ''
        const navs = [
            { title: '文档', id: 'docs' },
            { title: '算法', id: 'algorithm' },
            { title: '构建工具', id: 'buildTools' },
            { title: '类库', id: 'classLib' },
            { title: '协同办公', id: 'collaborativeOffice' },
            { title: 'CSS工具', id: 'cssTool' },
            { title: 'UI框架', id: 'uiLib' },
            { title: 'vscode 插件', id: 'vscode' },
            { title: '设计', id: 'design' },
            { title: '设计工具', id: 'designTool' },
            { title: '教程', id: 'course' },
            { title: '语言', id: 'language' },
            { title: '图标', id: 'icon' },
            { title: '社区', id: 'community' },
            { title: 'SVG工具', id: 'svgTool' },
            { title: '可视化图表库', id: 'dataView' },
        ]
        let navActive = 'docs'
        const loadNav = () => {
            const rc = navs.map(({ id, title }) => `<li id="${id}" class="${navActive === id ? 'nav-active' : ''}">${title}</li>`).join('')
            navBox.innerHTML = rc
        }
        loadNav()
        navBox.addEventListener('click', (e) => {
            const t = e.target;
            if (['li'].includes(t.tagName.toLowerCase())) {
                e.stopPropagation();
                navActive = t.id
                setActive(navActive)
                loadData(navActive)
            }
        })
        function setActive(id) {
            const nodes = navBox.childNodes
            for (let i = 0; i < nodes.length; i++) {
                const element = nodes[i];
                element.classList.remove('nav-active')
                if (element.id === id) {
                    element.classList.add('nav-active')
                }
            }
        }
        async function loadData(id) {
            const data = await import(`${baseURL}/static/data/${id}.js`).then(({ default: data }) => data)
            console.log(data);
            const rc = data.map(({ icon, name, url }) => `<li>
                <div class="img"><img src="${icon}" alt="${name}"></div>
                <a href="${url}" target="_blank" title="${name}">${name}</a>
            </li>`).join('')
            listBox.innerHTML = rc
        }
        loadData(navActive)
    </script>
</body>

</html>